var that;
class Tab {
    constructor(tab) {
        that = this
        // 获取最大的盒子
        this.tab = tab
        // 获取ul
        this.ul = this.tab.querySelector('ul')
        // ul下面的所有li
        this.lis = this.ul.querySelectorAll('li')
        // 获取li里边的删除
        this.del = this.ul.querySelectorAll('span:last-child')
        // 获取li里边要修改的标签span
        this.edit = this.ul.querySelectorAll('span:first-child')
        // 获取内容区
        this.content = this.tab.querySelector('#tabContent')
        // content下面所有的div
        this.divs = this.content.querySelectorAll('div')
        // 获取内容区里边要修改的
        this.add = this.tab.querySelector('#add')
        this.init()
    }
    // 初始化所有
    init() {
        this.againDom();
        this.add.onclick = this.addTab;
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i
            this.lis[i].onclick = this.changeTab;
            this.del[i].onclick = this.removeTab;
            this.edit[i].ondblclick = this.editTab;
            this.divs[i].ondblclick = this.editTab;
        }
    }
    // 切换功能
    changeTab() {
        that.clearClass()
        this.className = 'active'
        that.divs[this.index].className = 'contactive'
    }
    // 添加功能
    addTab() {
        that.clearClass();
        var li = `<li class="active">
                    <span>测试${Math.round(Math.random() * (100 - 1) + 1)}</span>
                    <span>X</span>
                </li>`
        var div = `
                <div class="contactive">
                <span>测试${Math.round(Math.random() * (100 - 1) + 1)}</span>
                </div>
            `
        that.ul.insertAdjacentHTML('beforeend', li)
        that.content.insertAdjacentHTML('beforeend', div)
        that.init()
    }
    // 删除功能
    removeTab(e) {
        // stopPropagation 阻止冒泡
        e.stopPropagation();
        var index = this.parentNode.index;
        this.parentNode.remove();
        that.divs[index].remove();
        if (document.querySelector('.active')) return
        if (index == 0) {
            index = 1
        } else {
            index--
        }
        that.lis[index] && that.lis[index].click()
        that.init();
    }
    // 编辑功能
    editTab() {
        var str = this.innerText;
        this.innerHTML = `<input style="width: 80px;" text="text" value="${str}" />`
        var input = this.children[0]
        input.focus();
        input.select();
        input.onblur = function (e) {
            this.parentNode.innerHTML = e.target.value
        }
        input.onkeyup = function(e) {
            if(e.keyCode == '13') {
                this.blur();
            }
        }
    }
    // 清空所有样式
    clearClass() {
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].className = ''
            this.divs[i].className = ''
        }
    }
    // 重新获取dom
    againDom() {
        this.lis = this.ul.querySelectorAll('li')
        this.divs = this.content.querySelectorAll('div')
        this.del = this.ul.querySelectorAll('span:last-child')
        this.edit = this.ul.querySelectorAll('span:first-child')
        this.divs = this.content.querySelectorAll('div')
    }
}


export default Tab